<!DOCTYPE HTML>
<html>
<head>
<title>order</title>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Hotel Deluxe Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--webfont-->
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'/>
<link href="css/steps.css" rel="stylesheet"/>
<link href="css/orders.css" rel="stylesheet"/>
<link href="css/datapicker.css" rel="stylesheet"/>
<script type="text/javascript" src="js/login.js"></script>
<script src="js/jquery.easydropdown.js"></script>
<script src="js/steps.js"></script>
<script src="js/jqeury.min.js"></script>
<script src="js/datapicker.js"></script>
<script src="js/moment.min.js"></script>
<!--Animation-->
<script src="js/wow.min.js"></script>
<link href="css/animate.css" rel='stylesheet' type='text/css' />
<script>
	new WOW().init();
</script>
</head>
<body>
    <div class="header">
        <div class="col-sm-8 header-left">
           <div class="logo">
               <a href="index.html"><img src="images/logo.png" alt=""/></a>
           </div>
           <div class="menu">
               <a class="toggleMenu" href="#"><img src="images/nav.png" alt="" /></a>
                   <ul class="nav" id="nav">
                       <li class="active"><a href="#">个人中心</a></li>
                       <li><a href="#">我的订单</a></li>
                       <li><a href="#">我的收藏</a></li>
                       <li><a href="#">历史记录</a></li>
                       <div class="clearfix"></div>
                   </ul>
                   <script type="text/javascript" src="js/responsive-nav.js"></script>
           </div>	
           <!----search-scripts---->
           <script src="js/classie.js"></script>
           <script src="js/uisearch.js"></script>
           <script>
               new UISearch( document.getElementById( 'sb-search' ) );
           </script>
           <!----//search-scripts---->						
       <div class="clearfix"></div>
   </div>
   <div class="col-sm-4 header_right">
       <div id="loginContainer"><a href="#" id="loginButton"><img src="images/login.png"><span>Login</span></a>
               <div id="loginBox">                
                   <form id="loginForm">
                           <fieldset id="body">
                               <fieldset>
                                   <label for="email">用户名</label>
                                   <input type="text" name="email" id="email">
                               </fieldset>
                               <fieldset>
                                       <label for="password">密码</label>
                                       <input type="password" name="password" id="password">
                               </fieldset>
                               <input type="submit" id="login" value="登录">
                               <label for="checkbox"><input type="checkbox" id="checkbox"> <i>Remember me</i></label>
                           </fieldset>
                           <span><a href="#">忘记密码？</a></span>
                           <span><a href="#">没有账号，注册</a></span>
                   </form>
               </div>
           </div>
           <div class="clearfix"></div>
       </div>
       <div class="clearfix"></div>
   </div>
   <div class="order">
        <div class="details">
                <div class="col-sm-6 header_right">
                <div class="card">
                    <img class="card-img-top" src="images/e1.jpg" alt="Card image cap">
                    <div class="card-body">
                    <p class="card-description">高级酒店</p>
                    <p class="card-price">￥200一晚</p>
                    </div>
                </div>
                </div>
                <div class="col-sm-6 header_right">
                <div class="order-form">
                    <form>
                        <label class="keyword">姓名</label>
                        <input type="text" name="name" placeholder="请输入真实姓名">
                        <label class="keyword">身份证号码：</label>
                        <input type="text" name="name" placeholder="请输入真实姓名">
                        <label class="keyword">联系电话</label>
                        <input type="text" name="name" placeholder="请输入真实姓名">
                        <label class ="keyword">入住时间</label>
                        <div class="datepicker">
                            <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
                            <input placeholder="开始日期" name="" class="c-datepicker-data-input only-date" value="">
                            <span class="c-datepicker-range-separator">-</span>
                            <input placeholder="结束日期" name="" class="c-datepicker-data-input only-date" value="">
                        </div>
                        <input type="submit" value="submit">
                    </form>
                </div>
            </div>
        </div>
   </div>
   <script type="text/javascript">
    $(function(){
      var DATAPICKERAPI = {
        // 默认input显示当前月,自己获取后填充
        activeMonthRange: function () {
          return {
            begin: moment().set({ 'date': 1, 'hour': 0, 'minute': 0, 'second': 0 }).format('YYYY-MM-DD HH:mm:ss'),
            end: moment().set({ 'hour': 23, 'minute': 59, 'second': 59 }).format('YYYY-MM-DD HH:mm:ss')
          }
        },
        shortcutMonth: function () {
          // 当月
          var nowDay = moment().get('date');
          var prevMonthFirstDay = moment().subtract(1, 'months').set({ 'date': 1 });
          var prevMonthDay = moment().diff(prevMonthFirstDay, 'days');
          return {
            now: '-' + nowDay + ',0',
            prev: '-' + prevMonthDay + ',-' + nowDay
          }
        },
        // 注意为函数：快捷选项option:只能同一个月份内的
        rangeMonthShortcutOption1: function () {
          var result = DATAPICKERAPI.shortcutMonth();
          return [{
            name: '昨天',
            day: '-1,-1',
            time: '00:00:00,23:59:59'
          }, {
            name: '这一月',
            day: result.now,
            time: '00:00:00,'
          }, {
            name: '上一月',
            day: result.prev,
            time: '00:00:00,23:59:59'
          }];
        },
        // 快捷选项option
        rangeShortcutOption1: [{
          name: '最近一周',
          day: '-7,0'
        }, {
          name: '最近一个月',
          day: '-30,0'
        }, {
          name: '最近三个月',
          day: '-90, 0'
        }],
        singleShortcutOptions1: [{
          name: '今天',
          day: '0'
        }, {
          name: '昨天',
          day: '-1',
          time: '00:00:00'
        }, {
          name: '一周前',
          day: '-7'
        }]
      };
        //十分秒年月日单个
        $('.J-datepicker').datePicker({
          hasShortcut:true,
          min:'2018-01-01 04:00:00',
          max:'2019-04-29 20:59:59',
          shortcutOptions:[{
            name: '今天',
            day: '0'
          }, {
            name: '昨天',
            day: '-1',
            time: '00:00:00'
          }, {
            name: '一周前',
            day: '-7'
          }],
          hide:function(){
            console.info(this)
          }
        });
        
        //年月日单个
        $('.J-datepicker-day').datePicker({
          hasShortcut: true,
          format:'YYYY-MM-DD',
          shortcutOptions: [{
            name: '今天',
            day: '0'
          }, {
            name: '昨天',
            day: '-1'
          }, {
            name: '一周前',
            day: '-7'
          }]
        });
        
        //年月日范围
        $('.J-datepicker-range-day').datePicker({
          hasShortcut: true,
          format: 'YYYY-MM-DD',
          isRange: true,
          shortcutOptions: DATAPICKERAPI.rangeShortcutOption1
        });

        //十分年月日单个
        $('.J-datepickerTime-single').datePicker({
          format: 'YYYY-MM-DD HH:mm'
        });
        
        //十分年月日范围
        $('.J-datepickerTime-range').datePicker({
          format: 'YYYY-MM-DD HH:mm',
          isRange: true
        });
        
        //十分秒年月日范围，包含最大最小值
        $('.J-datepicker-range').datePicker({
          hasShortcut: true,
          min: '2018-01-01 06:00:00',
          max: '2019-04-29 20:59:59',
          isRange: true,
          shortcutOptions: [{
            name: '昨天',
            day: '-1,-1',
            time: '00:00:00,23:59:59'
          },{
            name: '最近一周',
            day: '-7,0',
            time:'00:00:00,'
          }, {
            name: '最近一个月',
            day: '-30,0',
            time: '00:00:00,'
          }, {
            name: '最近三个月',
            day: '-90, 0',
            time: '00:00:00,'
          }]
        });
        //十分秒年月日范围，限制只能选择同一月，比如2018-10-01到2018-10-30
        $('.J-datepicker-range-betweenMonth').datePicker({
          isRange: true,
          between:'month',
          hasShortcut: true,
          shortcutOptions: DATAPICKERAPI.rangeMonthShortcutOption1()
        });
        
        //十分秒年月日范围，限制开始结束相隔天数小于30天
        $('.J-datepicker-range-between30').datePicker({
          isRange: true,
          between: 30
        });
        
        //年月单个
        $('.J-yearMonthPicker-single').datePicker({
          format: 'YYYY-MM',
          min: '2018-01',
          max: '2019-04'
        });
        
        //选择年
        $('.J-yearPicker-single').datePicker({
          format: 'YYYY',
          min: '2018',
          max: '2020'
        });
        
        
    });
  </script>
</body>
</html>